<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="__PUBLIC__/css/mui.min.css" rel="stylesheet" />
		<style>
		    html{font-size:calc(100/1080*100vw);}
			#header{
				height: 1.6rem;
				background-color: #000000;
			}
			#header img{
				width: 0.72rem;
				margin-top: 0.44rem;
				margin-left: 0.72rem;
			}
			#header h1{
				color: #ffffff;
				font-size: 0.5rem;
				line-height: 1.6rem;
			}
			.kapian{
				width: 9.71rem;
				height: 6.34rem;
				background: #;
				background-image: url(__PUBLIC__/image/kapian@2x.png);
				margin-top: 1.5rem;
				margin-left: 0.54rem;
				background-size: 100%;
			}
			.mui-content{
				background: #FFFFFF;
			}
			.jindu,.minge{
				width: 2.52rem;
				height: 0.38rem;
				font-size: 0.4rem;
				float: left;
				margin-left: 1.75rem;
				margin-top: 0.8rem;
				
			}
			.all{
				width: 9.5rem;
				height: 0.36rem;
				background: #dddddd;
				margin: 0 0.6rem;
				margin-top: 1.8rem;
				border-radius: 0.36rem;
			}
			.all_1{
				width: 1.54rem;
				height: 0.36rem;
				background: #efc784;
				margin: -0.36rem 0.6rem;
				border-radius: 0.36rem;
			}
			.huiji{
				width: 7.2rem;
				height: 3.29rem;
				border: 1px solid #DDDDDD;
				margin: 1.5rem auto 0rem;
				/*background:url(images/xuanzhong@2x.png) no-repeat bottom right;*/ 
			}
			.active{
				background:url(__PUBLIC__/image/xuanzhong@2x.png) no-repeat bottom right;
				border: 2px solid #c1a32e;
			}
			.huiji .huiji1{
				margin-top: 0.3rem;
				margin-left: 2.08rem;
				font-size: 0.4rem;
				float: left;
			}
			.huiji .huiji2{
				margin-top: 0.3rem;
				font-size: 0.36rem;
			}
			.huiji .huiji3{
				margin: 0.3rem 0.2rem 0rem 0.2rem;
				text-align: center;
				font-size: 0.30rem;
				color: #111111;
				line-height: 0.5rem;
			}
			.huiji span{
				font-size: 0.2rem;
				margin: 0.1rem 2.8rem;
				text-decoration:line-through;
				color: #666666;
			}
			.btn{
				width: 4.8rem;
				height: 1rem;
				margin: 1.2rem 3rem;
				background-color: #111111;
				font-size: 0.44rem;
				font-family: MicrosoftYaHei;
				color: #ffffff;
				border-radius: 0.2rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="header">
			<img src="__PUBLIC__/image/logo@2x.png" alt="LOGO"/>
			<h1 class="mui-title">BLACK CENTUEY</h1>
	    </header>
	    <div class="mui-content">
	    	<div class="kapian"></div>
	    	<div class="jindu">本期进度<span>12</span>%</div>
	    	<div class="minge">剩余名额<span>88</span>%</div>
	    	<div class="all"></div>
	    	<div class="all_1"></div>
	    	<div class="huiji">
	    		<div class="huiji1">精英会籍</div>
	    		<div class="huiji2">￥199.00</div>
	    		<div class="huiji3">iPhone 8特价减免、酒店特权、机票特权、真人管家、私人飞机、高端定制等数十项黑卡权益</div>
	    		<span>原价：499.00</span>
	    	</div>
	    	<button class="btn">下一步</button>
	    </div>
		<script src="__PUBLIC__/js/mui.min.js"></script>
		<script src="__PUBLIC__/js/jquery.js"></script>
		<script type="text/javascript">
			mui.init();
				
				var xiaoqie = true;
				$( '.huiji' ).click( function() {
					if(xiaoqie == true){
						$( this ).addClass( 'active' );
						xiaoqie = false;
						return;
                   }else{
                   	    $( this ).removeClass( 'active' );
                   	    xiaoqie = true;
						return;
                    }
			    } )
				
				//跳转申请页2
	      		mui('.btn')[0].addEventListener('tap',function(){
					//e.stopPropagation();
					if(xiaoqie == true){
						alert('请先选择世纪黑卡！');
					}else{
						mui.openWindow( {
						url: 'shenqing2.html',
						id: 'shenqing2'
					} )
					}
				} )
		</script>
	</body>

</html>